<!-- 渐变3D饼图样式-->
<template>
    <div style="height: 100%; margin-top: 100px;" class="higBox">
      <div :id="id" style="height: 100%"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
  
let chart = {};
export default {
  name: "",
  props: {
    id: {
      type: String,
      required: true,
    },
    dataList: {
      type: Array,
      default: [80, 200, 150, 300, 180]
    }
  },
  data() {
    return {
    };
  },
  mounted() {
    let { id, titileArr, dataList } = this
    let mCharts = echarts.init(document.querySelector(`#${id}`))
    let option = {
        grid: {
            top: '10%',
            left: '14%',
            right: '3%',
            bottom: '35%'
        },
        xAxis: {
            type: 'category',
            axisTick: false,
            axisLabel: {
            interval: 0,
            },
            data: titileArr,
            axisLabel: {
                color: 'rgb(170,170,170)',
                fontSize: 18,
            },
        },
        yAxis: {
            type: 'value',
            interval: 100,
            splitLine: {
              lineStyle: {
                  color: 'rgba(255, 255, 255, 0.2)'
              }
            },
            axisLabel: {
                color: 'rgb(170,170,170)',
                fontSize: 18,
            },
        },
        series: [
            {
              data: dataList,
              type: "pictorialBar",
              symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
              itemStyle: {
              normal: {
                color: function (params) {
                    let color = {
                      type: "linear",
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      colorStops: [{
                          offset: 0,
                          color: "#EEEEEE" // 0% 处的颜色
                      },
                      {
                          offset: 1,
                          color: "#BD6503" // 100% 处的颜色
                      }
                      ]
                    }
                  return color;
                },
              }
            },
          }
        ]
        }

    mCharts.setOption(option)
  },
  created() {
  },
  methods: {
  },
};
</script>
   
<style lang='less' scoped>
  .higBox{
    position: relative;
    z-index: 2;
    transform: scale(.9);
  }
</style>